<template>
    <div class="crud-container">
        <el-card shadow="never">
            <el-input v-model="query.keywords" placeholder="请输入关键字" style="max-width: 280px" />
            <el-button type="primary" class="ml10" @click="onSearch">
                <el-icon>
                    <ele-Search />
                </el-icon>
                查询
            </el-button>
            <el-button type="default" class="ml10" @click="onOpenAdd">
                <el-icon>
                    <ele-Refresh />
                </el-icon>
                重置
            </el-button>
        </el-card>
        <el-card shadow="never" class="content-box">
            <div class="toolbar">
                <el-button type="primary" @click="onOpenAdd">
                    <el-icon>
                        <ele-Plus />
                    </el-icon>
                    新增
                </el-button>
                <el-button type="danger">
                    <el-icon>
                        <ele-Delete />
                    </el-icon>
                    删除
                </el-button>
            </div>
            <el-table v-loading="loading" :data="tableData" style="width: 100%" border>
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="#" width="60" />
                <el-table-column prop="username" label="用户名" show-overflow-tooltip />
                <el-table-column prop="nickname" label="用户昵称" show-overflow-tooltip />
                <el-table-column prop="genderLabel" label="性别" show-overflow-tooltip />
                <el-table-column prop="deptName" label="部门" show-overflow-tooltip />
                <el-table-column prop="mobile" label="手机号" show-overflow-tooltip />
                <el-table-column label="状态" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == StatusEnum.ENABLE.value" type="success">
                            {{ StatusEnum.ENABLE.label }}
                        </el-tag>
                        <el-tag v-if="scope.row.status == StatusEnum.DISABLE.value" type="warning">
                            {{ StatusEnum.DISABLE.label }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />
                <el-table-column label="操作" show-overflow-tooltip width="240">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="onOpenUpdatePwd(scope.row)">
                            <el-icon>
                                <ele-EditPen />
                            </el-icon>
                            重置密码
                        </el-button>
                        <el-button link type="primary" size="small" @click="onOpenEdit(scope.row)">
                            <el-icon>
                                <ele-Edit />
                            </el-icon>
                            修改
                        </el-button>
                        <el-button link type="danger" size="small" @click="onTabelRowDel(scope.row)">
                            <el-icon>
                                <ele-Delete />
                            </el-icon>
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-model:current-page="query.pageNum"
                v-model:page-size="query.pageSize"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
            />
        </el-card>
        <UserForm ref="userFormRef" @refresh="getTableData" />
        <ResetPwd ref="resetPwdRef" />
    </div>
</template>
<script setup lang="ts" name="system-user">
import { ref, reactive, onMounted, defineAsyncComponent } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { User } from '@/api/system/user/types.ts'
import { Page } from '@/api/types.ts'
import { getUserList, getUserDetail } from '@/api/system/user/index.ts'
import { StatusEnum } from '@/enums/StatusEnum.ts'

const UserForm = defineAsyncComponent(() => import('./components/UserForm.vue'))
const ResetPwd = defineAsyncComponent(() => import('./components/ResetPwd.vue'))

/** 获取用户列表 */
const query = reactive<User.Query>({
    keywords: '',
    pageNum: 1,
    pageSize: 10,
})
const loading = ref(false)
const total = ref(0)
const tableData = ref<Array<User.Row>>()
const getTableData = () => {
    getUserList(query).then((resp: Page<User.Row>) => {
        total.value = resp.total || 0
        tableData.value = resp.list || []
    })
}

/** 搜索 */
const onSearch = () => {
    getTableData()
}
/** 打开新增弹窗 */
const userFormRef = ref()
const onOpenAdd = () => {
    userFormRef.value.openDialog()
}
/** 打开编辑弹窗 */
const onOpenEdit = async (row: User.Row) => {
    const formData = await getUserDetail(row.id)
    userFormRef.value.openDialog(formData)
}

/** 打开修改密码弹窗 */
const resetPwdRef = ref()
const onOpenUpdatePwd = (row: User.Row) => {
    resetPwdRef.value.openDialog(row)
}
/** 删除用户 */
const onTabelRowDel = (row: User.Row) => {
    ElMessageBox.confirm(`此操作将永久删除用户：${row.username}, 是否继续?`, '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            ElMessage.success('删除成功')
            getTableData()
        })
        .catch(() => {})
}
/** 每页条数改变 */
const onHandleSizeChange = (e: any) => {
    console.log(e)
}
/** 页码改变 */
const onHandleCurrentChange = (e: any) => {
    console.log(e)
}

onMounted(() => {
    getTableData()
})
</script>
